<template>
    <div class="budgetTabelPagePage">
        <div class="search-wrap d-flex a-center flex-wrap">
            <div class="search-item d-flex a-center m-b10">
                <label>部门</label>
                <el-select v-model="form.departmentId" class="m-l5" placeholder="请选择部门" clearable>
                    <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10 ">
                <label>项目名称</label>
                <el-select v-model="form.projectId" class="m-l5" placeholder="请选择项目" clearable>
                    <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>年度</label>
                <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="form.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                />
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>季度</label>
                <el-select class="m-l10" v-model="form.quarter" clearable>
                    <el-option label="第一季度" value="1"></el-option>
                    <el-option label="第二季度" value="2"></el-option>
                    <el-option label="第三季度" value="3"></el-option>
                    <el-option label="第四季度" value="4"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l10 d-flex a-center m-b10">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
<!--                <el-button class="button_edit m-r10">自动开票</el-button>-->
                <el-button class="button_edit" @click="onExport">
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                class="m-t20"
                index
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
        </public-table>
    </div>
</template>

<script setup>
import {budgetManagement, exportApi, fundManagementApi, invoicingManagementApi} from "@/api/businessFinance";
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDatePicker,
    ElMessage,
    ElDivider
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";
import {exportExcelFile, resetForm} from "@/common/utils/GlobalUtils";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const tableData = ref([]);

const tableOption = ref([
    { label: "部门名称", prop: "departmentName", minWidth: 80 },
    { label: "项目名称 ", prop: "projectName", minWidth: 80 },
    { label: "年度 ", prop: "year", minWidth: 80 },
    { label: "季度 ", prop: "quarter", minWidth: 80 },
    { label: "月度 ", prop: "monthly", minWidth: 80 },
    { label: "开票金额 ", prop: "invoicingAmount", minWidth: 80 },
    { label: "已开金额 ", prop: "invoicedAmount", minWidth: 80 },
    { label: "未开票金额 ", prop: "uninvoicedAmount", minWidth: 100 },
    { label: "开票名称 ", prop: "invoicingName", minWidth: 80 },
    { label: "税号 ", prop: "dutyParagraph", minWidth: 80 },
    { label: "开户行 ", prop: "openingBank", minWidth: 80 },
    { label: "账户", prop: "account", minWidth: 80 },
    { label: "发票状态 ", prop: "status",formatter:(val,row)=>{
            return ['','待开票','已开票'][val] || '-';
        }, minWidth: 80 },
]);

const form = reactive({
    departmentId:'',
    projectId:'',
    year:'',
    quarter:''
});

// 新增预算的form
const budgetForm = reactive({
    departmentId:'',
    projectId:'',
    year:'',
    quarter:'',
    list:[]
});


const departmentList = ref([]);
const getDepartmentVo = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        departmentList.value = res.data;
    });
}

const projectList = ref([]);
const getProjectList = () => {
    budgetManagement.getProjectList().then(res=>{
        projectList.value = res.data;
    });
}

const getAutomaticInvoicingPage = (param) => {
    invoicingManagementApi.getAutomaticInvoicingPage(param).then(res=>{
        tableData.value = res.data.content;
        page.total = res.data.totalSize;
    });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getAutomaticInvoicingPage(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size
    };
    getAutomaticInvoicingPage(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getAutomaticInvoicingPage(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
    exportApi.getAutomaticInvoicingPageLeadingOut(form).then(res=>{
        if(res){
            exportExcelFile(res,'自动开票表');
        }
    });
}

const visible = ref(false);
// 新增预算api
const addBudgetGatherRecord = (param) => {
    budgetManagement.addBudgetGatherRecord(param).then(res=>{
        if(res.code === '200'){
            visible.value = false;
            ElMessage.success('新增预算成功!');
        }
    });
}

// 新增预算/确认新增预算
const budgetFormRef1 = ref(null);
const budgetFormRef2 = ref(null);
const onConfirm = async () => {
    await budgetFormRef1.value.validate();
    if(budgetForm.list.length===0){
        ElMessage.warning('预算科目明细不能为空！');
        return;
    }
    await budgetFormRef2.value.validate();
    addBudgetGatherRecord(budgetForm);
}

// 编辑
const onEdit = (row) => {
    row.isEdit = true;
}

const onCancel = (row) => {
    row.isEdit = false;
}

const updateBudgetPredictionRecord = (param,callback) => {
    budgetManagement.updateBudgetPredictionRecord(param).then(res=>{
        if(res.code === '200'){
            if(callback)callback();
        }
    });
}

const onSave = (row) => {
    updateBudgetPredictionRecord({
        budgetPredictionRecordId:row.budgetPredictionRecordId,
        cost:row.cost,
        income:row.income,
        fee:row.fee,
        profit:row.profit
    },()=>{
        row.isEdit = false;
        ElMessage.success('保存成功!');
    });
}

const budgetSubjectTypeList = ref([]);
const getBudgetSubjectType = (type) => {
    return  budgetManagement.getBudgetSubjectType(type).then(res=>{
        if(res.code === '200'){
            budgetSubjectTypeList.value = res.data;
        }
    });
}

onMounted(()=>{
    getDepartmentVo();
    getProjectList();
    getAutomaticInvoicingPage({
        pageNum: 1,
        pageSize: 10
    });
});
</script>

<style lang="scss" scoped>
.budgetTabelPagePage{
  .search-wrap{
    .search-item{
      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .details-box{
    span{
      font-size: 15px;
      font-weight: 600;
    }
    .buttons-box{
      .icon{
        cursor: pointer;
        width: 28px;
        height: 28px;
      }
    }
  }
}
</style>
